﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResourceGraphicView.aspx.cs" Inherits="Demo.Web.Grafics.ResourceGraphicView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function tipRenderer(storeItem, item) {
            //calculate percentage.
            var total = 0;

            App.Chart1.getStore().each(function (rec) {
                total += rec.get('ResourcesNumber');
            });

            this.setTitle(storeItem.get('Name') + ' No. Recursos: ' + storeItem.get('ResourcesNumber') + ' - ' + Math.round(storeItem.get('ResourcesNumber') / total * 100) + '%');
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <br />
            <ext:Panel ID="Panel1"
            runat="server"
            Width="800"
            Height="600"
            Title="Recursos"
            Layout="FitLayout">
            <Items>
                <ext:Chart
                    ID="Chart1" 
                    runat="server"
                    Animate="true"
                    Shadow="true"
                    InsetPadding="60"
                    Theme="Base:gradients">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store1" 
                            runat="server"
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="ResourcesNumber" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Series>
                        <ext:PieSeries 
                            AngleField="ResourcesNumber" 
                            ShowInLegend="true" 
                            Donut="0" 
                            Highlight="true" 
                            HighlightSegmentMargin="20">
                            <Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
                            <Tips ID="Tips1" TrackMouse="true" Width="140" runat="server" Height="28">
                                <Renderer Fn="tipRenderer" />
                            </Tips>
                        </ext:PieSeries>
                    </Series>
                    
                </ext:Chart>
            </Items>
            </ext:Panel>
    </form>
</body>
</html>
